/**
 * 开发模式下的webpack配置
 * 在整个项目开发过程中，几乎99%的时间都是在这个模式下进行的
 * 注意。两种模式的配置有较大差异！！
 */

const path = require('path');
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin'
import precss from 'precss'
import autoprefixer from 'autoprefixer'
import rucksackCss from 'rucksack-css'
import px2rem from 'postcss-pxtorem'
import webConfig from './webs-config' //项目配置

const px2remOpts = {
    rootValue: 100,
    propWhiteList: [],
};

//所有的资源路径
let addressList=[];
//根据不同的路径返回唯一的数字编码用于添加到class后缀
let getClassIndex=function(address){
    if(addressList.indexOf(address)>-1){
        return addressList.indexOf(address)
    }
    else{
        addressList.push(address);
        return addressList.indexOf(address);
    }
};


export default {
    devtool: 'cheap-module-eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
    entry: [
        './src/webpack-public-path',  // 服务器静态资源路径配置，保证首先载入
        'react-hot-loader/patch',
        'webpack-hot-middleware/client?reload=true',
        path.resolve(__dirname, 'src/webs/' + webConfig.name + webConfig.startPath + '/js/index.js')
    ],
    target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
    output: {
        path: `${__dirname}/src`, // Note: Physical files are only output by the production build task `npm run build`.
        publicPath: '/',
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('development'), // Tells React to build in either dev or prod modes. https://facebook.github.io/react/downloads.html (See bottom)
            'process.env.apiUrl': JSON.stringify(webConfig.apiUrlForTest),
            __DEV__: true
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new HtmlWebpackPlugin({     // Create HTML file that includes references to bundled CSS and JS.
            template: 'src/webs/' + webConfig.name + webConfig.startPath + '/index.html',
            title: webConfig.title + '开发模式',
            favicon: './src/favicon.ico',
            minify: {
                removeComments: true,
                collapseWhitespace: true
            },
            hash: true,
            // 这样每次客户端页面就会根据这个hash来判断页面是否有必要刷新
            // 在项目后续过程中，经常需要做些改动更新什么的，一但有改动，客户端页面就会自动更新！
            inject: 'body'
        }),
        new webpack.LoaderOptionsPlugin({
            noInfo: true, // set to false to see a list of every file being bundled.
            debug: true,
            options: {
                postcss: () => [precss, autoprefixer, rucksackCss, px2rem(px2remOpts)]
            }
        })

    ],
    resolve: {
        modules: ['node_modules'],
        extensions: ['.web.js', '.js', '.json'],

        // 路径别名, 懒癌福音
        alias: {
            app: path.resolve(__dirname, 'src/js'),
            // 以前你可能这样引用 import { Nav } from '../../components'
            // 现在你可以这样引用 import { Nav } from 'app/components'

            style: path.resolve(__dirname, 'src/styles')
            // 以前你可能这样引用 import "../../../styles/mixins.scss"
            // 现在你可以这样引用 import "style/mixins.scss"

            // 注意：别名只能在.js文件中使用。
        }
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: ['babel-loader'],
                exclude: /node_modules/
            },
            {
                test: /\.scss$/,
                include: path.resolve(__dirname, 'src/js'),
                use: [
                    {loader: 'style-loader'},
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            importLoaders: 1,
                            sourceMap: true,
                            getLocalIdent: (context, localIdentName, localName, options) => {
                                return localName + '_' + getClassIndex(context.resourcePath);
                            }
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            parser: 'postcss-scss'
                        }
                    }
                ]
            },
            // 组件样式，需要私有化，单独配置

            {
                test: /\.scss$/,
                include: path.resolve(__dirname, 'src/styles'),
                use: [
                    {loader: 'style-loader'},
                    {loader: 'css-loader'},
                    {
                        loader: 'postcss-loader',
                        options: {
                            parser: 'postcss-scss'
                        }
                    }
                ]
            },
            // 公有样式，不需要私有化，单独配置

            {
                test: /\.scss$/,
                include: path.resolve(__dirname, 'src/webs/' + webConfig.name + webConfig.startPath + '/js'),
                use: [
                    {loader: 'style-loader'},
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            importLoaders: 1,
                            sourceMap: true,
                            getLocalIdent: (context, localIdentName, localName, options) => {
                                return localName + '_' + getClassIndex(context.resourcePath);
                            }
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            parser: 'postcss-scss'
                        }
                    }
                ]
            },
            // 项目组件样式，需要私有化，单独配置

            {
                test: /\.scss$/,
                include: path.resolve(__dirname, 'src/webs/' + webConfig.name + webConfig.startPath + '/styles'),
                use: [
                    {loader: 'style-loader'},
                    {loader: 'css-loader'},
                    {
                        loader: 'postcss-loader',
                        options: {
                            parser: 'postcss-scss'
                        }
                    }
                ]
            },
            // 项目公有样式，不需要私有化，单独配置

            {
                test: /\.css$/,
                include: path.resolve(__dirname, 'node_modules'),
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader'
                ]
            },

            {
                test: /\.(otf|eot|svg|ttf|woff|woff2).*$/,
                loader: 'url-loader',
                options: {
                    limit: 10000
                }
            },
            {
                test: /\.(gif|jpe?g|png|ico)$/,
                loader: 'url-loader',
                options: {
                    limit: 10000
                }
            }
        ]
    },
};
